<template>
	<div class="chongzhicishu">
		<div class="chongzhi">
			<div class="chongzhi_1">
				充值功能：
			</div>
			<div class="chongzhi_2">
				<span>监测次数</span>
				<span>剩余0次</span>
			</div>
			<div class="chongzhi_3">
				<span>监测次数可用于</span>
				<span>视频监测，直播监测，话题监测</span>
			</div>
		</div>
		
		<div class="chongzhi1">
			<div class="chongzhi1_1">
				充值次数：
			</div>
			<div class="chongzhi1_2">
				<ul>
					<li @click="dianji(index)" v-for="(item,index) in qian" :key="index">
						<p>
							<span>{{item.name}}次</span>
						</p>
						<p>
							<span>￥{{item.num1}}</span>
							<span>￥{{item.num}}</span>
						</p>
					</li>
				</ul>
			</div>
		</div>
		
		<div class="chongzhi2">
			<div class="chongzhi2_1">
				充值方式：
			</div>
			<div class="chongzhi2_2">
				<img src="../../../../assets/img/bibi.png" />
				<span>微信支付</span>
			</div>
		</div>
		
		<div class="chongzhi3">
			<div class="chongzhi3_1">
				支付方式：
			</div>
			<div class="chongzhi3_2">
				<span>￥{{bangshu}}</span>
				<span>(建议购买500次可节省500元)</span>
			</div>
		</div>
		
		<div class="zhuyishixiang">
			<ul>
				<li>· 支付成功后刷新页面立即生效</li>
				<li>· 付款成功后可开电子版增税普通发票，如需开发票，请 <span>联系客服</span> </li>
			</ul>
		</div>
		<div class="lijichongzhi">立即充值</div>
	</div>
</template>

<script>
	export default{
		name:"chongzhicishu",
		data(){
			return{
				qian:[
					{name:100,num:0,num1:300},{name:200,num:600,num1:500},{name:300,num:900,num1:700},{name:500,num:1500,num1:1000},
				],
				bangshu:''
			}
		},
		mounted:function(){
			this.dianji(0);
			
			$(".chongzhi1_2 ul li").click(function(){
				$(this).css({
					'border': '1px solid #0091FF',
					'box-shadow': '0 0 0.05rem #0091FF',
				})
				
				$(this).siblings().css({
					'border': '1px solid #D4D4D4',
					'box-shadow': '0 0 0.05rem #D4D4D4',
				})
			})
		},
		methods:{
			dianji(index){
				this.bangshu=this.qian[index].num1;
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.chongzhicishu{
		background-color: #fff;
		padding-bottom:1rem ;
		
		.chongzhi{
			margin-left:2.8rem ;
			border-bottom:1px solid #E7E7E7 ;
			padding-bottom:0.6rem ;
			
			.chongzhi_1{
				padding: 0.7rem 0;
				float: left;
				color: #333333;
				font-size: 0.4rem;
			}
			.chongzhi_2{
				border: 1px solid #0091FF;
				border-radius:0.1rem ;
				box-shadow: 0 0 0.05rem #0091FF;
				padding: 0.2rem 1rem;
				float: left;
				margin-left:1rem ;
				text-align: center;
				
				span:nth-of-type(1){
					color: #333333;
					font-size: 0.45rem;
					display: block;
				}
				span:nth-of-type(2){
					color: #999999;
					font-size: 0.35rem;
					display: block;
					margin-top:0.3rem ;
				}
			}
			.chongzhi_3{
				padding: 0.7rem 0;
				float: left;
				margin-left:0.8rem ;
				display: flex;
				span:nth-of-type(1){
					display: block;
					color: #999999;
					font-size: 0.35rem;
				}
				span:nth-of-type(2){
					display: block;
					color: #0091FF;
					font-size: 0.35rem;
				}
				
			}
		}
		.chongzhi::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.chongzhi1{
			margin-left:2.8rem ;
			border-bottom:1px solid #E7E7E7 ;
			padding-bottom:0.6rem ;
			padding-top:0.6rem ;
			
			.chongzhi1_1{
				padding: 0.7rem 0;
				float: left;
				color: #333333;
				font-size: 0.4rem;
			}
			.chongzhi1_2{
				float: left;
				margin-left:1rem ;
				text-align: center;
				
				ul{
					list-style: none;
					display: flex;
					li{
						cursor: pointer;
						padding: 0.2rem 1rem;
						border: 1px solid #D4D4D4;
						border-radius:0.1rem ;
						box-shadow: 0 0 0.05rem #D4D4D4;
						margin-right:2rem ;
						p:nth-of-type(1){
							span{
								color: #333333;
								display: block;
								font-size: 0.45rem;
								display: block;
							}
						}
						p:nth-of-type(2){
							text-align: center;
							width: 2rem;
							justify-content: space-around;
							display: flex;
							span:nth-of-type(1){
								display: block;
								color: #FF1200;
								font-size: 0.35rem;
								display: block;
								margin-top:0.3rem ;
							}
							span:nth-of-type(2){
								display: block;
								color: #D8D8D8;
								font-size: 0.35rem;
								margin-top:0.3rem ;
								text-decoration: line-through;
							}
						}
					}
					li:nth-of-type(1){
						border: 1px solid #0091FF;
						box-shadow: 0 0 0.05rem #0091FF;
					}
				}
				
			}
		}
		.chongzhi1::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.chongzhi2{
			margin-left:2.8rem ;
			border-bottom:1px solid #E7E7E7 ;
			padding-bottom:0.6rem ;
			padding-top:0.6rem ;
			
			.chongzhi2_1{
				padding: 0.7rem 0;
				float: left;
				color: #333333;
				font-size: 0.4rem;
			}
			.chongzhi2_2{
				padding: 0.4rem 0.4rem;
				border: 1px solid #0091FF;
				border-radius:0.1rem ;
				box-shadow: 0 0 0.05rem #0091FF;
				float: left;
				margin-left:1rem ;
				text-align: center;
				display: flex;
				justify-content: space-around;
				align-items: center;
				
				img{
					width: 1rem;
					height: 1rem;
					border-radius:50% ;
				}
				span{
					display: block;
					color: #333333;
					font-size: 0.45rem;
					margin-left:0.4rem ;
				}
				
				
				
			}
		}
		.chongzhi2::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.chongzhi3{
			margin-left:2.8rem ;
			padding-bottom:0.6rem ;
			padding-top:0.6rem ;
			
			.chongzhi3_1{
				padding: 0.7rem 0;
				float: left;
				color: #333333;
				font-size: 0.5rem;
			}
			.chongzhi3_2{
				padding: 0.6rem 0;
				padding-left:0.6rem ;
				display: flex;
				align-items: center;
				span:nth-of-type(1){
					display: block;
					color: #0091FF;
					font-size: 0.7rem;
				}
				span:nth-of-type(2){
					color: #666666;
					display: block;
					font-size: 0.35rem;
					margin-left:0.4rem ;
				}
				
				
			}
		}
		.chongzhi3::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.zhuyishixiang{
			margin-left:2.8rem ;
			
			ul{
				list-style: none;
				
				li{
					color: #999;
					font-size: 0.35rem;
					margin:0.4rem 0 ;
					
					span{
						cursor: pointer;
						color: #0091FF;
					}
				}
			}
		}
		
		.lijichongzhi{
			display: inline;
			color: #fff;
			background-color: #0091FF;
			font-size: 0.5rem;
			text-align: center;
			padding: 0.2rem 0.5rem;
			box-sizing: border-box;
			margin-left:2.8rem ;
			border-radius:0.1rem ;
			margin-top:1rem ;
			margin-bottom:1rem ;
			cursor: pointer;
		}
	}
</style>
